<template>
  <el-form :model="detailForm" label-position="right" class="elForm"
           ref="detailForm">
    <el-card class="box-card" shadow="never">
      <div slot="header">
        <span>基础信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车牌号：" prop="carNo">
            <el-input v-if="isEdit" placeholder="请输入车牌号" v-model="detailForm.carNo"></el-input>
            <span v-else>{{ detailForm.carNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车架号：" prop="vinNo">
            <el-input v-if="isEdit" placeholder="请输入车架号" v-model="detailForm.vinNo"></el-input>
            <span v-else>
              {{ detailForm.vinNo }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌/车型/车款：" prop="brandName">
            <linkage-select v-if="isEdit" @changeNode="linkageChange" v-model="linkageList"
                            placeholder="请选择品牌/车系/车型"/>
            <span v-else> {{ detailForm.brandName }}{{ detailForm.seriesName }}{{ detailForm.modelName }}</span>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="车辆产权：" prop="propertyRightName">
            <el-input v-if="isEdit" placeholder="请输入车辆产权" v-model="detailForm.propertyRightName"/>
            <span v-else>{{ detailForm.propertyRightName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册日期：" prop="registerTime">
            <el-date-picker v-if="isEdit" v-model="detailForm.registerTime" type="date" placeholder="请选择注册日期"
                            value-format='yyyy-MM-dd'
                            style="width: 100%;">
            </el-date-picker>
            <span v-else>{{ detailForm.registerTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称：">
            <el-input v-if="isEdit" placeholder="请输入客户名称" v-model="detailForm.customerName"></el-input>
            <span v-else>{{ detailForm.customerName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="租赁合同日期：">
            <el-date-picker v-if="isEdit" v-model="contractTime" type="daterange" range-separator="-"
                            start-placeholder="开始日期"
                            style="width: 100%" end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable
                            @change="()=>changeTime(contractTime,'contractTime')">
            </el-date-picker>
            <span v-else>
              {{ detailForm.leaseStartTime || '' }}-
               {{ detailForm.leaseStartTime || '' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险保单号：" prop="jqxPolicyCode">
            <el-input v-if="isEdit" placeholder="请输入交强险保单号" v-model="detailForm.jqxPolicyCode"></el-input>
            <span v-else>{{ detailForm.jqxPolicyCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商业险保单号：" prop="syxPolicyCode">
            <el-input v-if="isEdit" placeholder="请输入商业险保单号" v-model="detailForm.syxPolicyCode"></el-input>
            <span v-else>{{ detailForm.syxPolicyCode }}</span>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="出险日期：">
            <el-date-picker v-if="isEdit" v-model="detailForm.accidentTime" type="date" placeholder="请选择注册日期"
                            value-format='yyyy-MM-dd'
                            style="width: 100%;">
            </el-date-picker>
            <!--            <el-date-picker v-if="isEdit" v-model="dangerTime" type="daterange" range-separator="-"-->
            <!--                            start-placeholder="开始日期" style="width: 100%" end-placeholder="结束日期"-->
            <!--                            value-format="yyyy-MM-dd" clearable-->
            <!--                            @change="()=>changeTime(dangerTime,'dangerTime')">-->
            <!--            </el-date-picker>-->
            <span v-else>{{ detailForm.accidentTime }}</span>
          </el-form-item>
        </el-col>

      </el-row>

    </el-card>
  </el-form>
</template>

<script>
import LinkageSelect from "../../../components/linkageSelect.vue";

export default {
  name: "basicsInfo", //基础信息
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  components: {LinkageSelect},
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key, value) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "left";
      }
    },
    isEdit() {
      // let bool;
      // switch (this.state) {
      //   case "write":
      //     bool = true;
      //     break;
      //   case "disabled":
      //     bool = false;
      //     break;
      //   case "readonly":
      //     bool = false;
      //     break;
      // }
      return false;
    },
  },
  watch: {},
  data() {
    return {
      linkageList: [],
      contractTime: [],
      dangerTime: [],
      rules: {
        // carNo: [{required: this.state === 'write', messages: "请输入车号", trigger: "blur"}],
        // vinNo: [{required: this.state === 'write', message: "请输入车架号", trigger: "blur"}],
        // brandName: [
        //   {required: this.state === 'write', message: "请输入品牌/车系/车型", trigger: "blur"},
        // ],
        // propertyRightName: [
        //   {required: this.state === 'write', message: "请输入车辆产权", trigger: "blur"},
        // ],
        // customerName: [
        //   {required: this.state === 'write', message: "请输入客户名称", trigger: "blur"},
        // ],
        // syxPolicyCode: [
        //   {required: this.state === 'write', message: "请输入商业险保单号", trigger: "blur"},
        // ],
        // jqxPolicyCode: [
        //   {required: this.state === 'write', message: "请输入交强险保单号", trigger: "blur"},
        // ],
      },
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    linkageChange(val) {
      this.linkageList = val;
      if (val) {
        this.value.brandName = val[0] ? val[0].name : "";
        this.value.seriesName = val[1] ? val[1].name : "";
        this.value.modelName = val[2] ? val[2].name : "";
      } else {
        this.value.brandName = "";
        this.value.seriesName = "";
        this.value.modelName = "";
      }
      this.$forceUpdate();
    },

    changeTime(val, key) {
      this.detailForm.leaseStartTime = this.value.leaseStartTime = val[0]
      this.detailForm.leaseEndTime = this.value.leaseEndTime = val[1]
    },

    // handleEffect() {
    //   return new Promise((resolve, reject) => {
    //     this.$refs.detailForm.validate((valid) => {
    //       if (valid) {
    //         resolve();
    //       } else {
    //         this.locateToErr()
    //         reject();
    //       }
    //     });
    //   })
    // },
    //
    // locateToErr() {
    //
    //   this.$nextTick(() => {
    //     let isError = document.getElementsByClassName('is-error')
    //     isError[0].scrollIntoView({
    //       // 滚动到指定节点
    //       // 值有start,center,end，nearest，当前显示在视图区域中间
    //       block: 'center',
    //       // 值有auto、instant,smooth，缓动动画（当前是慢速的）
    //       behavior: 'smooth',
    //     })
    //   })
    // },
    //
    // valid() {
    //   return new Promise((resolve) => {
    //     this.$refs.detailForm.validate((valid) => {
    //       resolve(valid);
    //     });
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";
</style>


